<template>
  <div class="important-news">
    <van-swipe class="my-swipe"  indicator-color="white">
      <van-swipe-item>
        <img src="@/assets/images/home/header/header-1.jpg" alt="" srcset="" class="header-content">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/images/home/header/header-2.png" alt="" srcset="" class="header-content">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/images/home/header/header-3.jpg" alt="" srcset="" class="header-content">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/images/home/header/header-4.jpg" alt="" srcset="" class="header-content">
      </van-swipe-item>
    </van-swipe>
    <div class="list-wrap">
      <div @click="$router.push({ name: 'NewsDetail' })">
        <component
          :is="item.component"
          v-for="(item, index) in listOne"
          :key="index"
          :news="item"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { listOne } from "../data";
import NewsSingle from "./smallComponents/newsSingle";
import NewsThree from "./smallComponents/newsThree";
import Popularize from "./smallComponents/popularize";
import TextOnly from "./smallComponents/textOnly";
import HotSection from "./smallComponents/hotSection";
import BigCover from "./smallComponents/bigCover";
import Clound from "./smallComponents/clound";
export default {
  name: "ImportantNews",
  data() {
    return {
      listOne
    };
  },
  components: {
    NewsSingle,
    NewsThree,
    Popularize,
    TextOnly,
    HotSection,
    BigCover,
    Clound
  }
};
</script>

<style lang="scss" scoped>
.important-news {
  .my-swipe .van-swipe-item {
    .header-content{
      height: 200px;
      width: 100%;
    }
  }
  .list-wrap {
    padding: 10px;
  }
}
</style>
